<template>
  <div id="communication">
    <headBox class="headBox">
      <p slot="headText" class="headText">发现</p>
      <img
        src="../../assets/img/findMess.png"
        alt=""
        class="mess"
        slot="editBox"
      />
    </headBox>
    <find-top-nav></find-top-nav>
    <focus-person></focus-person>

    <ul class="communList">
      <li v-for="(item, idx) in communData" :key="idx">
        <div class="liContent">
          <div class="infoBox">
            <div class="leftInfo">
              <img :src="item.userImg" alt="" class="userImg" />
              <div class="info">
                <p class="name">{{ item.name }}</p>
                <div class="timeBox">
                  <p class="time">{{ item.time }}</p>
                  <p class="from">{{ item.from }}</p>
                </div>
              </div>
            </div>
            <input
              type="button"
              :value="item.focusStatus ? '已关注' : '+关注'"
              class="focusBtn"
              @click="focus(idx)"
            />
          </div>
          <p class="text">{{item.text}}</p>
          <div class="imgs">
            <img v-for="(imgItem,index) in item.imgs" :key="index" :src="imgItem" alt="" class="communImg">
          </div>
          <div class="footer">
            <div class="likeBox">
              <img :src="item.giveLike.you?require('../../assets/img/hasLike.png'):require('../../assets/img/like.png')" alt="" @click="like(idx)">
              <p class="likeCount">{{item.giveLike.count}}</p>
            </div>
            <div class="commentBox">
              <img src="../../assets/img/comment.png" alt="">
              <p>{{item.comment}}</p>
            </div>
            <div class="shareBox">
              <img src="../../assets/img/share.png" alt="">
              <p>转发</p>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <bottom-nav></bottom-nav>
  </div>
</template>
<script>
import headBox from "../../component/headBox.vue";
import findTopNav from "../../component/findTopNav.vue";
import focusPerson from "../../component/focusPerson.vue";
import bottomNav from '../../component/bottomNav.vue'
export default {
  name: "communication",
  components: {
    headBox,
    findTopNav,
    focusPerson,
    bottomNav
  },
  data() {
    return {
      communData: [
        {
          userImg: require("../../assets/img/communUserImg.png"),
          name: "我就是桃桃桃子呀",
          time: "1分钟前",
          from: "来自iphone",
          focusStatus: true,
          text: "看完孟老师的视频，收益颇多，新家装修，自己准备动动手做一些好看的装饰品",
          imgs: [
            require("../../assets/img/communImg1.png"),
            require("../../assets/img/communImg1.png"),
          ],
          giveLike: {
            you: false,
            count: 454,
          },
          comment: "5w",
        },
        {
          userImg: require("../../assets/img/communUserImg.png"),
          name: "我就是桃桃桃子呀",
          time: "1分钟前",
          from: "来自iphone",
          focusStatus: true,
          text: "看完孟老师的视频，收益颇多，新家装修，自己准备动动手做一些好看的装饰品",
          imgs: [
            require("../../assets/img/communImg1.png"),
            require("../../assets/img/communImg1.png"),
          ],
          giveLike: {
            you: false,
            count: 454,
          },
          comment: "5w",
        },
      ],
    };
  },
  methods:{
    focus(idx){
      this.communData[idx].focusStatus=!this.communData[idx].focusStatus
    },
    like(idx){
      this.communData[idx].giveLike.you=!this.communData[idx].giveLike.you
      if(this.communData[idx].giveLike.you){
        this.communData[idx].giveLike.count++;
      }else{
        this.communData[idx].giveLike.count--;
      }
    }
  }
};
</script>
<style lang="less" scoped>
#communication {
  background: #f5f5f5;
}
.headBox {
  position: relative;
  .headText {
    font-size: 0.17rem;
    color: #ffffff;
  }
  .mess {
    position: absolute;
    right: 0.08rem;
    top: 0.1rem;
  }
}
.communList {
  li {
    width: 3.43rem;
    margin: 0 auto;
    background: #FFFFFF;
    border-radius: 0.08rem;
    margin-top: 0.17rem;
    .liContent {
      width: 3.19rem;
      margin: 0 auto;
      .infoBox {
        display: flex;
        justify-content: space-between;
        .leftInfo {
          display: flex;
          .userImg {
            width: 0.44rem;
            height: 0.44rem;
            margin-top: 0.12rem;
          }
          .info {
            margin-top: 0.15rem;
            display: flex;
            flex-direction: column;
            margin-left: 0.06rem;
            .name {
              font-size: 0.14rem;
            }
            .timeBox {
              margin-top: 0.03rem;
              font-size: 0.12rem;
              display: flex;
              .from {
                margin-left: 0.05rem;
              }
            }
          }
        }
        .focusBtn {
          border: 0.01rem solid #1b7373;
          width: 0.5rem;
          height: 0.26rem;
          color: #1b7373;
          font-size: 0.12rem;
          text-align: center;
          margin-top: 0.19rem;
          border-radius: 0.16rem;
          background: #fff;
        }
      }
      .text{
        height: 0.43rem;
        font-size: 0.14rem;
        margin-top: 0.12rem;
      }
      .imgs{
        display: flex;
        margin-top: 0.08rem;
        justify-content: space-between;
        .communImg{
          width: 1.56rem;
          height: 1.56rem;
        }
      }
      .footer{
        display: flex;
        font-size: 0.12rem;
        justify-content: space-between;
        margin-top: 0.12rem;
        height: 0.24rem;
        line-height: 0.24rem;
        .likeBox,.commentBox,.shareBox{
          display: flex;
          img{
            width: 0.24rem;
            height: 0.24rem;
          }
        }

      }
    }
  }
}
</style>